<template>
    <div>
      <nav-header></nav-header>
      <nav-bread>
        goods
        <!-- <span slot="bread">goods1</span>
        <span slot="b">goods2</span> -->
      </nav-bread>
      <div class="accessory-result-page accessory-page">
        <div class="container">
          <div class="filter-nav">
            <span class="sortby">Sort by:</span>
            <a href="javascript:void(0)" class="default cur">Default</a>
            <a @click="sortGoods" href="javascript:void(0)" class="price">Price <svg class="icon icon-arrow-short"><use xlink:href="#icon-arrow-short"></use></svg></a>
            <a href="javascript:void(0)" class="filterby stopPop">Filter by</a>
          </div>
          <div class="accessory-result">
            <!-- filter -->
            <div class="filter stopPop" id="filter">
              <dl class="filter-price">
                <dt>Price:</dt>
                <dd @click="priceChecked='all'"><a href="javascript:void(0)" :class="{'cur':priceChecked == 'all'}">All</a></dd>
                <dd v-for="(price,index) in priceFilter" :key = "index" @click="setPriceChecked(index)">
                  <a :class="{'cur':priceChecked == index}" href="javascript:void(0)">{{price.startPrice}} - {{price.endPrice}}</a>
                </dd>
              </dl>
            </div>
            <!-- search result accessories list -->
            <div class="accessory-list-wrap">
              <div class="accessory-list col-4">
                <ul>
                  <li class="item" v-for="item in goodList" :key="item.id">
                    <div class="pic">
                      <a href="#"><img :src="'/static/'+item.productImage" alt=""></a>
                    </div>
                    <div class="main">
                      <div class="name">{{item.productName}}</div>
                      <div class="price">{{item.salePrice}}</div>
                      <div class="btn-area">
                        <a href="javascript:;" @click="addCart(item.productId)" class="btn btn--m">加入购物车</a>
                      </div>
                    </div>
                  </li>
                </ul>
                <div v-show="!busy" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="30">
                  加载中...
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <modal v-bind:mdShow="mdCartShow" v-on:close="closeModal">
        <p slot="message">加入购物车成功!</p>
        <div slot="btnGroup">
          <a href="javascript:;" @click="closeModal" class="btn btn--m">关闭</a>
          <router-link to="/cart" class="btn btn--m">查看购物车</router-link >
        </div>
      </modal>
      <modal v-bind:mdShow="mdShow" v-on:close="closeModal">
        <p slot="message">请先登录，否则无法加入购物车</p>
        <div slot="btnGroup">
          <a href="javascript:;" @click="closeModal" class="btn btn--m">关闭</a>
        </div>
      </modal>
      <nav-footer></nav-footer>
    </div>
</template>
<script>
import './../assets/css/base.css'
import './../assets/css/product.css'
import NavHeader from '@/components/Header.vue'
import NavFooter from '@/components/Footer.vue'
import NavBread from '@/components/NavBread.vue'
import Modal from '@/components/Modal.vue'
import axios from 'axios'
export default {
  data () {
    return {
      goodList: [],
      sortFlag: true,
      page: 1,
      pageSize: 8,
      busy: true,
      loading: false,
      mdShow: false,
      mdCartShow: false,
      priceFilter: [
        {
          startPrice: '0.00',
          endPrice: '100.00'
        },
        {
          startPrice: '100.00',
          endPrice: '500.00'
        },
        {
          startPrice: '500.00',
          endPrice: '1000.00'
        },
        {
          startPrice: '1000.00',
          endPrice: '5000.00'
        }
      ],
      priceChecked: 'all'
    }
  },
  mounted () {
    this.getGoodsList()
  },
  methods: {
    getGoodsList (flag) {
      var param = {
        page: this.page,
        pageSize: this.pageSize,
        sort: this.sortFlag ? 1 : -1,
        priceLevel: this.priceChecked
      }
      // axios传参必须用params传
      axios.get('/goods/list', {
        params: param
      }).then((response) => {
        let res = response.data
        if (res.status === '0') {
          if (flag) {
            this.goodList = this.goodList.concat(res.result.list)
            if (res.result.count === 0) {
              this.busy = true
            } else {
              this.busy = false
            }
          } else {
            this.goodList = res.result.list
            this.busy = false
            if (res.result.count === 0) {
              this.busy = true
            }
          }
        } else {
          this.goodList = []
        }
      })
    },
    sortGoods () {
      this.sortFlag = !this.sortFlag
      this.page = 1
      this.getGoodsList()
    },
    loadMore: function () {
      this.busy = true
      setTimeout(() => {
        this.page++
        this.getGoodsList(true)
      }, 500)
    },
    setPriceChecked: function (index) {
      this.priceChecked = index
      this.page = 1
      this.getGoodsList()
    },
    addCart (productId) {
      axios.post('/goods/addCart', {
        productId: productId
      }).then((response) => {
        let res = response.data
        if (res.status === '0') {
          this.mdCartShow = true
        } else {
          this.mdShow = true
        }
      })
    },
    closeModal () {
      this.mdShow = false
      this.mdCartShow = false
    }
  },
  components: {
    NavHeader,
    NavFooter,
    NavBread,
    Modal
  }
}
</script>
